<style lang="stylus" scoped>
</style>

<template>
  <q-layout ref="layout" view="hHh lpR fFf">
    <q-header>
      <app-nav :left-nav="leftNav" :right-nav="drawerRight" @toggle="val => { leftNav = val }" @toggle-right="val => { drawerRight = val }"></app-nav>
    </q-header>
    <q-drawer
      v-if="hasLeftNav"
      v-model="leftNav"
      :mini="!leftNav"
      @click.capture="drawerClick"
      bordered show-if-above side="left"
      content-class="bg-grey-2" :width="250">
      <q-scroll-area class="fit bg-white" :thumb-style="thumbStyle">
        <left-nav :module-name="moduleName" :collapse="!leftNav"></left-nav>
        <!-- <div class="q-mini-drawer-hide absolute" style="top: 32px; right: 8px">
          <q-btn
            dense
            round
            unelevated
            color="purple"
            icon="chevron_left"
            @click="miniState = true"
          />
        </div> -->
      </q-scroll-area>
    </q-drawer>
    <q-drawer
      side="right"
      v-model="drawerRight"
      bordered
      :width="420"
      :breakpoint="500"
      content-class="bg-white"
      class="q-pa-none relative-position"
    >
      <div style="height: 100%;padding-bottom: 260px">
        <Chat :flag="flag" :router-change="routerChange" :module-name="moduleName"/>
        <q-separator />
      </div>
      <div style="height: 260px" class="absolute-bottom">
        <Sent @change="val => flag = val"/>
      </div>
    </q-drawer>
    <!-- <q-scroll-area style="height:100vh" :thumb-style="thumbStyle"> -->
    <q-page-container class="bg-grey-2" style="height:100vh">
      <breadcrumb-tags v-if="hasBreadcrumbTags"/>
      <q-scroll-area :thumb-style="thumbStyle" :style="{height: windowHeight}">
        <keep-alive :include="keepAlive">
          <router-view class="q-pa-sm q-ma-xs"></router-view>
        </keep-alive>
        <q-inner-loading :showing="visible">
          <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </q-scroll-area>
    </q-page-container>
    <!-- </q-scroll-area> -->
    <!-- 全局的ajax_bar -->
    <!-- 若在 quasar.config.js 中配置loadingBar 则无需下面 -->
    <!-- <q-ajax-bar ref="ajaxBar" color="primary" :delay="0" /> -->
    <!-- 全局的警告弹窗（如无权限等） -->
  </q-layout>
</template>

<script>
import AppNav from './AppNav/AppNav'
import LeftNav from './LeftNav/LeftNav'
import { mapState } from 'vuex'
import { LoadingBar } from 'quasar'
import BreadcrumbTags from 'components/BreadcrumbTags/BreadcrumbTags'
import Chat from './Common/Chat'
import Sent from './Common/Chat/Sent'
export default {
  components: {
    AppNav,
    LeftNav,
    BreadcrumbTags,
    Chat,
    Sent
  },
  data () {
    return {
      thumbStyle: {
        right: '3px',
        borderRadius: '4px',
        backgroundColor: '#ccc',
        width: '8px',
        opacity: 0.75
      },
      visible: false,
      miniState: false,
      leftNav: true,
      drawerRight: false,
      flag: false,
      routerChange: false
    }
  },
  computed: {
    ...mapState('loading', {
      fullLoading: 'fullLoading',
      ajaxBar: 'ajaxBar'
    }),
    keepAlive () {
      return this.$store.state.tagsView.cachedViews
    },
    key () {
      return this.$route.fullPath
    },
    hasLeftNav () {
      return this.$route.path.split('/')[1] === 'pp' || this.$route.path.split('/')[1] === 'wp'
    },
    hasBreadcrumbTags () {
      return this.$route.path.split('/')[1] === 'pp' || this.$route.path.split('/')[1] === 'wp'
    },
    moduleName () {
      return this.$route.path.split('/')[1]
    },
    windowHeight () {
      console.log(window.innerHeight)
      return window.innerHeight - 86 + 'px'
    }
  },
  watch: {
    fullLoading (val) {
      val ? this.visible = true : setTimeout(() => {
        this.visible = false
      }, 500)
    },
    ajaxBar (val) {
      val ? LoadingBar.start() : LoadingBar.stop()
    },
    '$route' (route) {
      this.routerChange = !this.routerChange
    }
  },
  mounted () {
  },
  methods: {
    drawerClick (e) {
      // if in "mini" state and user
      // click on drawer, we switch it to "normal" mode
      if (this.miniState) {
        this.miniState = false

        // notice we have registered an event with capture flag;
        // we need to stop further propagation as this click is
        // intended for switching drawer to "normal" mode only
        e.stopPropagation()
      }
    }
  }
}
</script>
